import {createRouter, createWebHistory} from 'vue-router'
import Home from '../views/Home.vue'

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },

        {
            path: '/study',
            name: 'study',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/study/Study.vue'),
            children: [
                {
                    // 二级路由路径（注意：不要加 /，否则会被视为根路径）
                    path: 'base', // 完整路径为 /study/base
                    name: 'studyBase',
                    // 二级路由对应的组件
                    component: () => import('../views/study/course_list.vue')
                },
                {
                    path: 'advance', // 完整路径为 /study/advance
                    name: 'studyAdvance',
                    component: () => import('../views/study/chapter_view.vue')
                }
            ]
        },
        {
            path: '/tool_category',
            name: 'tool_category',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/ToolCategory.vue'),
        },
        {
            path: '/creative_connection',
            name: 'creative_connection',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/creative_connection.vue'),
        },

        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (About.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import('../views/About.vue'),
        },
    ],
})

export default router
